<template>
    <view class="hg-list">
        <ul class="itemlist">
            <li class="item" @click="goInfo(item)" v-for="(item,index) in list" :key="index">
                <view class="name">
                    <h4>{{item.instrument_id.split('-')[0]}}</h4>
                    <span>{{item.name1}}</span>
                </view>
                <view class="jiage" :class="{'isRed':item.best_bid>item.best_ask}">{{item.best_ask}}</view>
                <view class="jiage" :class="{'isRed':item.best_bid>item.best_ask}">{{item.best_bid}}</view>
            </li>
        </ul>
    </view>
</template>

<script>
export default {
    props:{
        list:Array
    },
    methods:{
        goInfo(){
            uni.navigateTo({
                url:'../../xiangqing/xiangqing'
            })
        }
    }
};
</script>
<style lang="less" scoped>
.hg-list {
    .itemlist {
        padding: 20upx 0 0 0upx;
        .item {
            display: flex;
            font-size: 34upx;
            padding: 20upx;
            border-bottom: 1upx solid #e9e9e9;
            .name {
                flex: 2;
                text-align: left;
                padding-left: 10upx;
                h2 {
                    font-size: 30upx;
                    color: #373737;
                }
                span {
                    font-size: 24upx;
                    color: #9f9f9f;
                }
            }
            .jiage {
                line-height: 60upx;
                height: 60upx;
                margin: 10upx 30upx 0 0;
                text-align: center;
                border-radius: 10upx;
                flex: 1;
                color: #e7fff6;
                background-color: #2cba8c;
                &.isRed {
                    background-color: #f64e45;
                }
            }
        }
    }
}
</style>